<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>三栏布局示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0; padding: 20px;
  }
  h2 {
    margin-top: 40px;
  }
  .container {
    margin-bottom: 40px;
    border: 1px solid #ccc;
    padding: 10px;
  }

  /* 方法一：浮动布局 */
  .float-container {
    overflow: hidden; /* 清除浮动 */
  }
  .float-left, .float-center, .float-right {
    float: left;
    height: 100px;
    line-height: 100px;
    color: white;
    text-align: center;
  }
  .float-left {
    width: 20%;
    background: #3498db;
  }
  .float-center {
    width: 60%;
    background: #2ecc71;
  }
  .float-right {
    width: 20%;
    background: #e74c3c;
  }

  /* 方法二：Flexbox布局 */
  .flex-container {
    display: flex;
    height: 100px;
    color: white;
    text-align: center;
  }
  .flex-left {
    flex: 0 0 20%;
    background: #9b59b6;
    line-height: 100px;
  }
  .flex-center {
    flex: 1;
    background: #f39c12;
    line-height: 100px;
  }
  .flex-right {
    flex: 0 0 20%;
    background: #16a085;
    line-height: 100px;
  }

  /* 方法三：CSS Grid布局 */
  .grid-container {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    height: 100px;
    color: white;
    text-align: center;
  }
  .grid-left {
    background: #34495e;
    line-height: 100px;
  }
  .grid-center {
    background: #d35400;
    line-height: 100px;
  }
  .grid-right {
    background: #27ae60;
    line-height: 100px;
  }
</style>
</head>
<body>

<h1>三栏布局的三种常见方法示例</h1>

<h2>方法一：浮动布局 (float)</h2>
<div class="container float-container">
  <div class="float-left">左栏</div>
  <div class="float-center">中栏</div>
  <div class="float-right">右栏</div>
</div>

<h2>方法二：Flexbox布局</h2>
<div class="container flex-container">
  <div class="flex-left">左栏</div>
  <div class="flex-center">中栏</div>
  <div class="flex-right">右栏</div>
</div>

<h2>方法三：CSS Grid布局</h2>
<div class="container grid-container">
  <div class="grid-left">左栏</div>
  <div class="grid-center">中栏</div>
  <div class="grid-right">右栏</div>
</div>

</body>
</html>
